<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getPrescriptionListService } from '@/api/medicine'
import type { PageParams } from '@/types/consult'
import type { Prescription } from '@/types/room'

import PrescriptionItem from './components/PrescriptionItem.vue'
import { Toast } from 'vant'

const pageParams = ref<PageParams>({
  current: '1',
  pageSize: '10',
})

// 处方列表
const prescriptionList = ref<Prescription[]>()
// 获取处方列表
const getPrescriptionList = async () => {
  const t = Toast.loading({
    message: '加载中...',
    duration: 0,
  })
  try {
    const { rows, pageTotal } = await getPrescriptionListService(pageParams.value)
    prescriptionList.value = rows
  } catch (error) {
    Toast.fail('获取处方记录失败')
  } finally {
    t.clear()
  }
}

onMounted(() => {
  getPrescriptionList()
})
</script>

<template>
  <div class="my-prescription">
    <cp-nav-bar title="我的处方" />
    <template v-if="prescriptionList?.length">
      <van-list>
        <PrescriptionItem v-for="item in prescriptionList || []" :key="item.id" :item="item" />
      </van-list>
    </template>
    <template v-else>
      <van-empty description="暂无处方" />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.my-prescription {
  background-color: var(--cp-bg);
  padding: 56px 15px 10px;
  height: calc(100vh - 66px);
}
</style>
